<template>
	<div class="app-container bgWhite radius8">		
		<div class="text-center plr30 border-bottom pb20 relative">
			<span class="fb mr20">添加商品</span>
			<div class="flex col-center right-btn">
				<el-button class="mt5" type="defaultBtn" @click="handleAdd">确认添加</el-button>
			</div>
		</div>
		<div class="bgWhite radius8">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="商品" name="message1">
					<tab1 @getValue="getValue"></tab1>
				</el-tab-pane>
				<!-- <el-tab-pane label="套餐" name="message2">
					<tab2></tab2>
				</el-tab-pane> -->
				<!-- <el-tab-pane label="解决方案" name="message3">
					<tab3></tab3>
				</el-tab-pane> -->
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import tab1 from "./components/tab1.vue"
	import tab2 from "./components/tab2.vue"
	import tab3 from "./components/tab3.vue"
	export default{
		components:{
			tab1,
			tab2,
			tab3
		},	
		data(){
			return{
				activeName:'message1',
				goodsId:[]
			}
		},
		methods:{
			getValue(e){
				this.goodsId = e
			},
			//确认添加
			handleAdd(){
				if(this.goodsId.length == 0 && this.activeName == 'message1'){
					this.$modal.msgError("请选择商品");
					return false;
				}else if(this.goodsId.length == 0 && this.activeName == 'message2'){
					this.$modal.msgError("请选择套餐");
					return false;
				}
				 localStorage.setItem('goodsId', JSON.stringify(this.goodsId));
				// 返回上一页
				this.$router.back();
				this.$tab.closePage();
			}
		}
	}
</script>

<style>
	.right-btn {
		position: absolute;
		right: 30px;
		bottom: 10px;
	}
	.demo-tabs .el-tabs__item{
		padding: 30px 20px;
	}
</style>